<template>
  <el-dialog :title="title" destroy-on-close append-to-body :visible.sync="show" width="1200px" :before-close="cancel">
    <el-form :model="queryParams" ref="queryForm" size="small" inline>
      <el-row>
        <el-form-item :label="$t('时间选择')">
          <el-date-picker
            v-model="queryParams.time"
            type="daterange"
            @change="getList"
            clearable
            value-format="yyyy-MM-dd"
          />
        </el-form-item>

        <el-form-item :label="$t('账单类型')" prop="type">
          <el-select @change="getList" clearable filterable v-model="queryParams.type" :placeholder="$t('店铺销量')">
            <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in bill_type_distributor_list" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('sku编号')" prop="skuNo">
          <el-input @keyup.enter.native="getList" clearable v-model="queryParams.skuNo" />
        </el-form-item>
        <el-form-item>
          <el-button @click="getList" type="primary" size="mini">{{ $t('搜索') }}</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <el-table :height="calTableHeight() - 100" ref="TableRef" :data="tableData" row-key="menuId">
      <el-table-column align="center" show-overflow-tooltip width="150" prop="afterFunds" :label="$t('业务类型')">
        <template slot-scope="{ row }">
          <span :style="{ color: $randomColor(row.type) }"> {{ handleType(row.type) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="payAmount" :label="$t('金额')">
        <template #default="{ row }">
          <div>{{ row.payAmount ? (+row.payAmount).toFixed() : '' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="afterFunds" :label="$t('变动类型(增加/减少)')">
        <template slot-scope="{ row }">
          <span style="color: green" v-if="row.changeType == 1">增加</span>
          <span style="color: red" v-if="row.changeType == 2">减少</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="beforeFunds" :label="$t('变化前金额')">
        <template slot-scope="{ row }">
          <span>{{ row.beforeFunds ? (+row.beforeFunds).toFixed() : '' | thousand }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="afterFunds" :label="$t('变化后金额')">
        <template slot-scope="{ row }">
          <span>{{ row.afterFunds ? (+row.afterFunds).toFixed() : '' | thousand }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="isWithdraw" :label="$t('能否提现')">
        <template slot-scope="{ row }">
          <span v-if="row.paid == 1">是</span>
          <span v-if="row.paid == 0">否</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="" :label="$t('是否生成提现单')">
        <template slot-scope="{ row }">
          <span v-if="row.isWithdraw == 1">是</span>
          <span v-if="row.isWithdraw == 0">否</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="createTime" :label="$t('创建时间')" width="180" />

      <el-table-column align="center" show-overflow-tooltip prop="" :label="$t('操作')">
        <template slot-scope="{ row }">
          <el-button
            v-hasPermi="['distribution:billDistributor:query']"
            v-show="row.type !== 14"
            type="text"
            @click="handleDetail(row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">关闭</el-button>
    </div>
    <Detail
      :FormData="FormData"
      :type="detailInfo.type"
      :show.sync="detailInfo.show"
      :title="detailInfo.title"
      :data="detailInfo.data"
    />
  </el-dialog>
</template>

<script>
import { billDistributor } from '@/api/bill/distributerBalance'
import Detail from '../../distributerBalance/components/detail.vue'
import { billDistributorList } from '@/api/bill/platDistributerBalance'
import { useDict } from '@/utils/useDict'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => {},
    },
    /**
     * 标题
     */
    title: {
      type: String,
      required: true,
    },
    /**
     * type
     */
    type: {
      type: [String, Number],
      required: true,
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    Detail,
  },
  data() {
    return {
      FormData: {},
      /**详情信息 */
      detailInfo: {
        /**显示详情 */
        show: false,
        type: '',
        title: '',
        data: [],
        query: {},
      },
      /**
       * 账单类型
       */
      bill_type_distributor_list: [],
      tableData: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        time: [],
      },
    }
  },
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList()
      }
    },
  },
  created() {
    useDict('bill_type_distributor').then(({ bill_type_distributor }) => {
      this.bill_type_distributor_list = bill_type_distributor
    })
  },
  methods: {
    handlePayType(type) {
      const index = this.bill_type_distributor_list.findIndex((i) => i.dictValue == type)
      if (index > -1) return this.bill_type_distributor_list[index].dictLabel
    },
    handleDetail(row) {
      const { id, type } = row
      billDistributor(id).then((res) => {
        const { code, data } = res
        this.FormData = data
        if (code === 200) {
          this.detailInfo.show = true
          this.detailInfo.title = this.handlePayType(type)
          this.detailInfo.type = type
          this.detailInfo.data = []
          switch (type) {
            case 1 /**.	1.订单批次sku费用 type=1 */:
              this.detailInfo.data = data.orderBatchSkuFeeData
              break
            case 4 /** type=4 */:
              this.detailInfo.data = [data.reissueSkuFeeData]
              break
            case 5 /** type=5 */:
              this.detailInfo.data = data.returnSkuFeeToSeller
              break
            case 8 /** type=8 */:
              this.detailInfo.data = data.profitStockCheckData
              break
            case 9 /** type=9 */:
              this.detailInfo.data = data.lossStockCheckData
              break
            case 10 /** type=10 */:
              this.detailInfo.data = [data.reissueSkuFeeUnderTake]
              break
            case 13 /** type=13 */:
              this.detailInfo.data = [data.billDistributorWithdrawVo]
              break
            case 15 /** type=15 */:
              this.detailInfo.data = [data.returnSkuFreightBaleFeeToSeller]
              break
            case 16 /** type=16 */:
              this.detailInfo.data = [data.reissueSkuFreightBaleFeeUnderTake]
              break
            case 17 /** type=17 */:
              this.detailInfo.data = [data.platformCompensateData]
              break
            case 18 /** type=18  取消订单*/:
              this.detailInfo.data = data.cancelOrderPackageSkuList
              break
            default:
              break
          }
        }
      })
    },
    handleType(type) {
      const index = this.bill_type_distributor_list.findIndex((i) => i.dictValue == type)
      return this.bill_type_distributor_list[index]?.dictLabel
    },
    getList() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const startTime = selectDate[0] || ''
      const endTime = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        startTime,
        endTime,
        distrId: this.formData.distrId,
      }
      delete data.time
      /**************** 处理查询条件 end *******************/
      billDistributorList(data).then((res) => {
        const { code, rows, total } = res
        if (code === 200) {
          this.tableData = rows || []
          this.total = total
        }
      })
    },
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss"></style>
